window.addEventListener("load", async () => {
  try {
    const res = await axios({
      url: "/dashboard",
    });
    console.log(res);

    const data = res.data.overview;
    for (const k in data) {
      // 遍历对象
      document.querySelector(`[name = "${k}"]`).innerHTML = data[k];
    }

    // 插入薪资走势图
    function salaryEchert() {
      const myChart = echarts.init(document.querySelector("#line"))
      // 解构数组对象
      const year = res.data.year
      const option = {
        title: {
          text: "2022全学科薪资走势",
          left: "2%",
          top: "2%",
        },
        xAxis: {
          type: "category",
          //遍历数组，后台月份数据
          data: year.map((v) => v.month),
          axisLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },

        series: [{
          //遍历数组，后台薪资数据
          data: year.map((v) => v.salary),
          type: "line",
          smooth: true,
          symbolSize: "10",
          lineStyle: {
            width: "5",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0,
                  color: "#92c6ff",
                },
                {
                  offset: 0.6,
                  color: "#fff",
                },
              ],
              global: false,
            },
          },
        }, ],
        color: ["#51abff"],
      }
      myChart.setOption(option)
    }
    // 调用函数
    salaryEchert()

    // 班级薪资分布图
    function salaryPic() {
      const myChart = echarts.init(document.querySelector("#salary"))
      const salaryData = res.data.salaryData
      const option = {
        title: {
          text: "班级薪资分布",
          left: "2%",
          top: "2%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
        },
        series: [{
          name: "班级薪资分布",
          type: "pie",
          radius: ["53%", "40%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: salaryData.map((v) => {
            return {
              value: v.g_count + v.b_count,
              name: v.label,
            }
          }),
          color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
        }, ],
      }
      myChart.setOption(option)
    }
    salaryPic()


    // 插入每组薪资分布图
    function getArr() {
      const myChart = echarts.init(document.querySelector("#lines"))
      const groupData = res.data.groupData
      const option = {
        xAxis: {
          type: "category",
          data: groupData[1].map((v) => v.name),
          axisLine: {
            lineStyle: {
              color: "#999",
              type: "dashed",
            },
          },
        },

        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [{
            data: groupData[1].map((v) => v.hope_salary),
            type: "bar",
          },
          {
            data: groupData[1].map((v) => v.salary),
            type: "bar",
          },
        ],
        color: [{
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: "#39d49d",
              },
              {
                offset: 1,
                color: "#ffffff",
              },
            ],
            global: false,
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: "#59a6ef",
              },
              {
                offset: 1,
                color: "#e7edf1",
              },
            ],
            global: false,
          },
        ],
      }
      // 点击切换数据
      const btns = document.querySelectorAll("#btns button")
      btns.forEach((dom) => {
        dom.addEventListener("click", function () {
          // 取消所有的点击颜色
          document.querySelector("#btns .btn-blue")
            .classList.remove("btn-blue");
          // 给点击事件添加点击颜色
          this.classList.add('btn-blue');
          // 这个索引代表了当前点击了哪个组
          const index = this.innerHTML.trim();
          option.xAxis.data = groupData[index].map((v) => v.name)
          option.series[0].data = groupData[index].map((v) => v.hope_salary)
          option.series[1].data = groupData[index].map((v) => v.salary)
          // 重新渲染列表
          myChart.setOption(option)
        })
      })
      myChart.setOption(option)
    }
    getArr()

    // 插入男女薪资分布图
    function getBg() {
      const myChart = echarts.init(document.querySelector("#gender"))
      const salaryData = res.data.salaryData
      // console.log(salaryData);
      const option = {
        title: [{
            text: "男女薪资分布",
            left: "2%",
            top: "2%",
          },
          {
            text: "男生",
            left: "center",
            top: "45%",
          },
          {
            text: "女生",
            left: "center",
            top: "85%",
          },
        ],
        series: [{
            type: "pie",
            radius: ["30%", "40%"],
            center: ["50%", "30%"],
            data: salaryData.map((v) => {
              return {
                name: v.label,
                value: v.b_count,
              }
            }),
            color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 5,
            },
          },
          {
            type: "pie",
            radius: ["30%", "40%"],
            center: ["50%", "70%"],
            data: salaryData.map((v) => {
              return {
                name: v.label,
                value: v.b_count,
              }
            }),
            label: {
              position: "outer",
              alignTo: "labelLine",
              bleedMargin: 5,
            },
          },
        ],
      }
      myChart.setOption(option)
    }
    getBg()

    // 学生地图
    const initMapChart = (provinceData) => {
      const myEchart = echarts.init(document.querySelector("#map"))
      const dataList = [{
          name: "南海诸岛",
          value: 0
        },
        {
          name: "北京",
          value: 0
        },
        {
          name: "天津",
          value: 0
        },
        {
          name: "上海",
          value: 0
        },
        {
          name: "重庆",
          value: 0
        },
        {
          name: "河北",
          value: 0
        },
        {
          name: "河南",
          value: 0
        },
        {
          name: "云南",
          value: 0
        },
        {
          name: "辽宁",
          value: 0
        },
        {
          name: "黑龙江",
          value: 0
        },
        {
          name: "湖南",
          value: 0
        },
        {
          name: "安徽",
          value: 0
        },
        {
          name: "山东",
          value: 0
        },
        {
          name: "新疆",
          value: 0
        },
        {
          name: "江苏",
          value: 0
        },
        {
          name: "浙江",
          value: 0
        },
        {
          name: "江西",
          value: 0
        },
        {
          name: "湖北",
          value: 0
        },
        {
          name: "广西",
          value: 0
        },
        {
          name: "甘肃",
          value: 0
        },
        {
          name: "山西",
          value: 0
        },
        {
          name: "内蒙古",
          value: 0
        },
        {
          name: "陕西",
          value: 0
        },
        {
          name: "吉林",
          value: 0
        },
        {
          name: "福建",
          value: 0
        },
        {
          name: "贵州",
          value: 0
        },
        {
          name: "广东",
          value: 0
        },
        {
          name: "青海",
          value: 0
        },
        {
          name: "西藏",
          value: 0
        },
        {
          name: "四川",
          value: 0
        },
        {
          name: "宁夏",
          value: 0
        },
        {
          name: "海南",
          value: 0
        },
        {
          name: "台湾",
          value: 0
        },
        {
          name: "香港",
          value: 0
        },
        {
          name: "澳门",
          value: 0
        },
      ]
      const provinceDa = res.data.provinceData
      //  console.log(provinceDa);
      // 处理数据
      provinceDa.forEach((item) => {
        dataList.find((v) => {
          if (item.name.indexOf(v.name) !== -1) {
            v.value = item.value
          }
        })
      })
      let option = {
        title: {
          text: "籍贯分布",
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} 位学员",
          borderColor: "transparent",
          backgroundColor: "rgba(0,0,0,0.5)",
          textStyle: {
            color: "#fff",
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: "left",
          bottom: "20",
          text: ["6", "0"],
          inRange: {
            color: ["#ffffff", "#0075F0"],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: "china",
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
              color: "#e0ffff",
            },
            emphasis: {
              areaColor: "#34D39A",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [{
          name: "籍贯分布",
          type: "map",
          geoIndex: 0,
          data: dataList,
        }, ],
      }
      myEchart.setOption(option)
    }

    initMapChart()
  } catch (err) {
    console.log(err)
  }
})